<template>
  <div id="building">
    <div class="home-box" v-loading="loading">
    <div @click="show = !show" class="recommendBtn">
      <a-switch @click="show = !show" size="small" v-model="show" />
      <span :class="show == true ?'show':'' ">显示右侧推荐</span>
    </div>
    <div class="list-box org-list" :class="show == true ? '' : 'org-big'">
      <div v-for="(item, index) in orgList" :key="index" @click="enterDetail(item.id) " class="box">
        <a-card hoverable>
          <template #cover>
            <!-- <img alt="example" :src="'http://120.26.194.73/'+item.cover" /> -->
            <ImageVue :cover="item.cover" />
            <!-- <img alt="example" v-else src="@/assets/images/公务员.webp" /> -->
            <div style="position: absolute">tel:{{ item.contact }}</div>
          </template>
          <a-card-meta :title="item.name">
            <template #description>{{ item.intro }}</template>
          </a-card-meta>
        </a-card>
      </div>
    </div>
    <div v-show="show" class="list-box recommend-box">
      <div class="recommend" v-for="item in recommendList" :key="item.type">
        <a-button
          type="link"
          :loading="item.type == 0 ? btnLoading : btnLoading1"
          @click="recommendNew(item.type)"
        >
          <span>换一换</span>
        </a-button>
        <a-carousel >
          <div style="position: relative" v-for="item1 in item.list" :key="item1.id" @click="location(item.type,item1)">
            <!-- <img style="width: 100%; display: block" alt="example" src="@/assets/images/考研.webp" /> -->
            <ImageVue :cover="item1.cover" :height="'210px'" />
            <div style="position: absolute" class="cardInfo">{{ item1.name }}</div>
          </div>
        </a-carousel>
      </div>
    </div>
  </div>
  </div>
 
</template>

<script>
import { mapGetters } from 'vuex'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import FrontMixins from '@/mixins/frontMixin'
import { getStorage } from '@/utils/index'
import { getOrgList, getCourse, getlecturer } from '@/api/home'
import ImageVue from './components/image.vue'

export default {
  mixins: [mixinsBackStack, FrontMixins],
  components:{ImageVue},
  data() {
    return {
      bgImg: require('@/assets/images/banner.png'),
      token: '',
      orgList: [],
      courseList: [],
      lecturerList: [],
      recommendList: [],
      loading: false,

      show: true,
      btnLoading: false,
      btnLoading1: false
    }
  },
  computed: {
    ...mapGetters('user', ['visitor'])
  },
  created() {
    this.token = `${getStorage('token', 0)}`
    this.organizationList()
    this.getcourseList()
    this.getlectList()
    console.log(this.recommendList, '6666')
  },
  mounted() {},
  methods: {
    // 渲染机构列表
    async organizationList() {
      const { code, msg, rows, total } = await getOrgList()
      rows.forEach(item => {
        if (!item.file || item.file == null) {
          item.file = {}
          if (item.type == '0') {
            item.file.filePath = require('@/assets/images/考研.webp')
          } else if (item.type == '1') {
            item.file.filePath = require('@/assets/images/公务员.webp')
          } else if (item.type == '2') {
            item.file.filePath = require('@/assets/images/驾考.webp')
          } else if (item.type == '3') {
            item.file.filePath = require('@/assets/images/计算机.webp')
          }
        }
      })
      console.log(rows)
      this.orgList = rows
    },
    async getcourseList() {
      const { code, msg, rows, total } = await getCourse()
      if (code == 200) {
        this.courseList = rows
        this.recommendList.push({ type: 0, list: this.getRandom(rows) })
      }
    },
    async getlectList() {
      const { code, msg, rows, total } = await getlecturer()
      if (code == 200) {
        this.lectList = rows
        this.recommendList.push({ type: 1, list: this.getRandom(rows) })
      }
    },
    enterDetail(id) {
      this.loading = true
      this.$router.push({
        path: 'orgDetail',
        query: { id: JSON.stringify(id) }
      })
    },
    location(type,item){
      // this.loading = true
      let itemId = item.id
      let id
      if(type == 1){
        id = item.orgId
      }else{
        id = item.organization.id
      }
      
      console.log(item);
      this.$router.push({
        path:"orgDetail",
        // query:{id:JSON.stringify(id),itemId:JSON.stringify(itemId)}
        query:{id,itemId,type}
      })
    },
    getRandom(arr) {
      if (arr == []) return
      let len = arr.length
      let arrList = []
      for (var i = len - 1; i >= 0; i--) {
        let randomIndex = Math.floor(Math.random() * (i + 1))
        let itemIndex = arr[randomIndex]
        arr[randomIndex] = arr[i]
        arr[i] = itemIndex
      }
      for (let a = 0; a < 4; a++) {
        arrList.push(arr[a])
      }
      return arrList
    },
    recommendNew(type) {
      if (type == 0) {
        this.btnLoading = true
        setTimeout(() => {
          this.btnLoading = false
          this.$nextTick(() => {
            this.recommendList[0].list = this.getRandom(this.courseList)
          })
        }, 1000)
      } else {
        this.btnLoading1 = true
        // this.recommendList[1].list = this.getRandom(this.lectList)
        setTimeout(() => {
          this.btnLoading1 = false
          this.$nextTick(() => {
            this.recommendList[1].list = this.getRandom(this.lectList)
          })
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#building{
  background:url("../../assets/images/background1.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}

.home-box {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  // flex: 1;
  // flex-direction: column;
  // align-items: center;

  .list-box {
    // margin-top: 20px;
    // flex: 1;
    padding: 0 40px 10px 40px;
    
  }
 
  .recommendBtn {
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    left: 40px;
    display: flex;
    align-items: center;
    .ant-switch{
      margin-right: 5px;
    }
    .show{
      color:#0092ff;
    }
  }
  .recommend-box {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 40px 5px 0;
    .recommend {
      overflow: hidden;
      border-radius: 20px;
      padding-top: 40px;
      position: relative;
      background: rgba(222, 222, 222, 0.1);
      height: 48%;
      box-shadow: 0 5px 6px #0000004d;
      .ant-btn {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
      }
      .cardInfo {
        left: 0;
        right: 0;
        bottom: 13px;
        line-height: 50px;
        text-align: left;
        padding-left: 10px;
        height: 50px;
        color: white;
        // width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }
  .org-list {
    flex: 1;
    height: 80vh;
    margin-top: 50px;
    overflow: scroll;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
  .org-big {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }

  /deep/ .ant-card-cover {
    img {
      height: 200px;
    }
    position: relative;
    div {
      width: auto;
      padding: 0 5px;
      background: white;
      height: 30px;
      border-radius: 5px;
      line-height: 30px;
      position: absolute;
      right: 10px;
      font-size: 16px;
      bottom: -35px;
    }
  }
  /deep/ .ant-card-body {
    padding: 10px;
    .ant-card-meta-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 225px;
  line-height: 225px;
  // background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #020202;
}
.box {
    // width: 300px;
    // height: 300px;
    margin-top: 100px;
    margin-left: 30px;
    transition: all 0.4s;//设置上浮过渡时间
}
 
.box:hover {
    box-shadow: 0 8px 8px 0 grey;  // 设置盒子阴影
    transform: translate(0, -10px); // 鼠标悬浮时box向上浮动的距离
}
</style>
